<script setup lang="ts">
import { NCarousel } from "naive-ui";
import PostsContentList from "@/components/PostsContentList.vue";
</script>

<template>
  <div class="container">
    <div class="welcome">
      <n-carousel
        direction="vertical"
        dot-placement="right"
        mousewheel
        style="width: 900px; height: 240px"
      >
        <img
          class="carousel-img"
          alt="Welcome come to the freesky"
          src="https://cdn.pixabay.com/photo/2021/07/08/14/06/sea-6397001_640.jpg"
        />
        <img
          class="carousel-img"
          alt="Welcome come to the freesky"
          src="https://cdn.pixabay.com/photo/2021/05/31/03/53/sea-6297625_640.jpg"
        />
        <img
          class="carousel-img"
          alt="Welcome come to the freesky"
          src="https://cdn.pixabay.com/photo/2023/07/28/11/45/landscapes-8155111_640.jpg"
        />
        <img
          class="carousel-img"
          src=""
        />
        <img
          class="carousel-img"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1LAgD35Yd-teEm4HosC0Chswnzo0Z1TGgSw&s"
        />
        <img
          class="carousel-img"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVU_rYnsMu7mcrmfn94sc9GcX14JVccMoPdA&s"
        />
        <img
          class="carousel-img"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuMTGTstbIVjDscCAhPBHb0lB22KCUfIoCwg&s"
        />
      </n-carousel>
    </div>

    <PostsContentList />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  margin-left: 50px;
  margin-top: 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>
